<template>
  <a-modal
    :title="title"
    width="70%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit(SelectedRowKeys)"
    @cancel="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-form-model-item label="审批历史" prop="ApprovalHistory">
          <a-table
            ref="ApprovalHistoryTable"
            :columns="ApprovalHistoryColumns"
            :rowKey="(row) => row.Id"
            :dataSource="data"
            :pagination="pagination"
            :loading="loading"
            :rowSelection="{ selectedRowKeys: SelectedRowKeys, onChange: onSelectChange }"
            :bordered="true"
            size="small"
          >
            <span slot="action" slot-scope="text, record">
              <template>
                <a @click="handleEdit(record.Id)"></a>
              </template>
            </span>
          </a-table>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import store from '@/store'
import { stringify } from 'querystring'

const ApprovalHistoryColumns = [
  { title: '审批人', dataIndex: 'UserName', width: '10%' },
  { title: '审批时间', dataIndex: 'CreateTime', width: '40%' },
  { title: '审批意见', dataIndex: 'Remark', width: '20%' },
  { title: '状态', dataIndex: 'StateName', width: '10%' },
  { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } },
]

export default {
  props: {
    parentObj: Object,
  },
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      visible: false,
      loading: false,
      entity: {},
      rules: {},
      title: '',
      pagination: {},
      SelectedRowKeys: [],
      ApprovalHistoryColumns,
      data: [],
    }
  },
  methods: {
    init() {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    getDataList(id) {
      this.loading = true
      this.$http.post('/GBT_Manage/GBT_ServiceRequest/GetApprovalHistoryList', { id: id }).then((resJson) => {
        this.loading = false
        this.data = resJson.Data
      })
    },
    openForm(id, title) {
      this.init()
      if (id) {
        this.getDataList(id)
      }
    },
    handleEdit(id) {},
    handleSubmit(selectedRowKeys) {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.visible = false
      })
    },
    onSelectChange(selectedRowKeys) {},
  },
}
</script>
